<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/weixi/Public/css/bootstrap.min.css">
    <title>商城登录页面</title>
    <style>
        *{
            box-sizing: border-box;     /*从IE8开始兼容*/
            text-size-adjust:none;
        }
        /*img{*/
        /*max-width: 100%;*/
        /*}*/
        ul,li{
            list-style: none;margin: 0;padding:0;
        }
        html,body, .container{
            height:100%;margin:0;padding:0;
        }
        span{
            display: inline-block;
        }
        .container{
            max-width: 640px;min-width: 320px;margin: auto;
        }
        /*header{*/
            /*height:8%; display:flex;background: #3f3f3f;width: 100%;color: white;font-size: 20px;*/
        /*}*/
        /*header>div{*/
            /*text-align: center; height: 100%;align-items: center; display:flex;*/
        /*}*/
        section{
            height:100%; background: #eeeeee;width: 100%;overflow: scroll;
        }
        .section-header{
            height:8%;background: #ff7166;display:flex;
        }
        .section-header>div{
            text-align: center; height: 100%;align-items: center; display:flex;
        }
        .register:hover{
            color: #ef3712;
        }
        .login:hover{
            color: #ef3712;
        }
        .nivoSlider img{
            width: 100%;
        }
    </style>
    <script src="/weixi/Public/js/jquery-1.11.1.min.js"></script>
    <script src="/weixi/Public/js/bootstrap.min.js"></script>
    <script src="/weixi/Public/js/jquery.nivo.slider.js" type="text/javascript" charset="UTF-8" ></script>
    <link rel="stylesheet" href="/weixi/Public/em-ui/index.css">
    <script type="text/javascript">
        $(function () {
            $("#return").click(function () {
                window.history.back(-1);
            })
        })
    </script>
</head>
<body>
<div class="container">
    <section>
        <div class="section-header">
           <div style="width: 16%;height: 100%;" id="return"><span class="glyphicon glyphicon-chevron-left" style="color: white;display: inline-block;margin: auto;font-size: 20px"></span></div>
            <div style="width: 70%;height: 100%;color: white;"><span style="display: inline-block;margin: auto;font-size: 20px">注册 / 登录</span></div>
        </div>
        <div class="section-content" >
            <div style="height:50px ;width: 90%;margin: auto">
                <span style=" margin-top: 5%">欢迎光临，登陆后体验更多服务</span>
                <div style="float: right; margin-top: 5%;font-size: 18px;margin-right: 2%; " class="register" ><a href="{:U('Register/index')}">注册</a></div>
            </div>
        </div>
        <div class="section-footer" style="position: absolute;width: 100%">
            <div class="Login" style="position: relative">
                <div id="app" >
                    <div >
                        <div class="modal-body">
                            <div v-if="mes" class="alert alert-danger">{{mes}}
                                <button class="close" @click="mes=''">&times;</button>
                            </div>
                            <el-form ref="lgoinForm" :model="logindata" :rules="rules" label-width="80px">
                                <el-form-item label="电话" prop="phone">
                                    <el-input v-model="logindata.phone" />
                                </el-form-item>
                                <el-form-item label="密码" prop="password">
                                    <el-input v-model="logindata.password" />
                                </el-form-item>
                            </el-form>
                            <div class="row">
                                <div class="col-xs-4 col-xs-offset-9">
                                    <el-button @click="dologin()">登录</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--<form class="form-horizontal">-->
                    <!--<input class="form-control" type="text" placeholder="用户手机号码" style="margin: 2%;width: 95%">-->
                    <!--<input class="form-control" type="password" placeholder="密码" style="margin: 2%;width: 95%">-->
                    <!--<input type="button" style="width: 95%;height: 40px;margin: 2%;background: #ff7166;color: white;font-size: 16px" class="btn" value="立即登录"></input>-->
                <!--</form>-->
            </div>

        </div>
    </section>
</div>


<script src="/weixi/Public/js/vue.min.js"></script>
<script src="/weixi/Public/js/vue-resource.min.js"></script>
<script src="/weixi/Public/em-ui/index.js"></script>
<script src="/weixi/Public/js/jquery-1.11.1.min.js"></script>
<script src="/weixi/Public/js/bootstrap.min.js"></script>
<script>
    Vue.http.options.emulateJSON=true;
    new Vue({
        el: "#app",
        data: {
            mes: '',
            logindata: {},
            rules: {
                phone: {required: true, message: '请输入电话'},
                password: {required: true, message: '请输入密码'}
            }
        },
        methods:{
            dologin(){
                this.$refs.lgoinForm.validate(valid => {
                    if (!valid) {
                        return;
                    }
                    this.$http.post('/weixi/Home/Login/index',this.logindata).then(resp =>{
                        let result = resp.data;
                        if(result.status){
//                            self.location='http://rty.tunnel.qydev.com/weixi/index.php/Home/Main/index';
//                            window.location.href="http://rty.tunnel.qydev.com/weixi/index.php/Home/Main/index";
                            location ="http://rty.tunnel.qydev.com/weixi/index.php/Home/Main/index";
                        }else{
                            this.mes= result.error;
                        }
                    })
                });
            }
        }
    })
</script>
</body>
</html>